<template>
    <div class="common-table-wrap">
        <div>
            <div v-if="!hideHeader" class="table-header">
                {{ title }}（{{ total }}）
                <div style="float: right;">
                    <slot name="headerRight"></slot>
                </div>
            </div>
            <TableContent class="common-table-content" v-if="noSelection" :table-data="tableData" :loading="loading" :stripe="stripe"
                :table-key="tableKey" :height="props.height" @row-click="rowClick">
                <slot></slot>
            </TableContent>
            <slot v-else></slot>
            <div class="fr">
                <pagination :total="total" :page-size="pageSize" :current-page="pageIndex" :layout="layout" :small="small"
                    :page-sizes="pageSizes" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
            </div>
        </div>
    </div>
</template>

<script setup>
import Pagination from '@/components/pagination/pagination.vue';
import TableContent from './table-content.vue';

const emit = defineEmits(['update:pageSize', 'update:pageIndex', 'request-list', 'row-click']);

const props = defineProps({
    title: String,
    // 总数
    total: Number,
    pageSize: Number,
    pageIndex: Number,
    // loading 状态
    loading: Boolean,
    // 是否隐藏标题
    hideHeader: Boolean,
    // 空数据显示文案
    noDataText: {
        type: String,
        default: '暂无数据'
    },
    layout: {
        type: String,
        default: 'total, sizes, prev, pager, next, jumper'
    },
    pageSizes: {
        type: Array,
        default: () => {
            return [10, 20, 50]
        }
    },
    tableData: {
        type: Array,
        default: () => []
    },
    tableKey: { // 表格如果在tabs下，刷新表格需要更新tableKey,否则会抖动
        type: String,
        default: 'r'
    },
    noSelection: { // 没有复选框
        type: Boolean,
        default: true
    },
    height: {
        type: [Number, String],
        default: 400
    },
    small: {
        type: Boolean,
        default: false
    },
    stripe: {
        type: Boolean,
        default: false
    }
})


// 改变 pageSize
function handleSizeChange (pageSize) {
    emit('update:pageSize', pageSize)
    emit('update:pageIndex', 1)
    emit('request-list')
}

// 改变 pageIndex
function handleCurrentChange (pageIndex) {
    emit('update:pageIndex', pageIndex)
    emit('request-list')
}

function rowClick(row, column, event) {
    emit('row-click', row, column, event);
}


</script>

<style lang="scss" scoped>
.fr {
    display: flex;
    justify-content: flex-end;
    padding: 30px 0px;
}
</style>
